<script setup>
// FormDrawer组件主要应用插槽，涉及到插槽应用，子传父组件通信等知识
import { ref } from "vue";

const showDrawer = ref(false);
// 设置按钮加载中
const loading = ref(false);
const showLoading = () => loading.value = true;
const hideLoading = () => loading.value = false;

//打开弹窗
const open = () => showDrawer.value = true;
//关闭弹窗
const close = () => showDrawer.value = false;

//提交
const emit = defineEmits(["submit"])
const submit = () => emit("submit")

//使用 <script setup> 的组件是默认关闭的，可以通过 defineExpose 编译器宏来显式
//指定在 <script setup> 组件中要暴露出去的属性
defineExpose({
    open, close, showLoading, hideLoading
})

// 由于弹窗组件中具体内容信息需要渲染父组件传递的数据，
// 因此我们需要子组件FormDrawer中使用defineProps()接收父组件数据
defineProps({
    //每个父组件的标题都不一样，所以需要设置
    title: String,
    //每个父组件需要的弹窗大小都不一样，所以需要设置
    size: {
        type: String,
        default: "45%",
    },
    //elementPlus中控制是否在关闭 Drawer 之后将子元素全部销毁，默认值为false
    destroyOnClose: {
        type: Boolean,
        default: false
    },
    //提交按钮名称不同，所以按钮名称也需要父组件传递
    confirmText: {
        type: String,
        default: "提交"
    }
})
</script>

<template>
    <!-- elementPlus中的抽屉组件
         size属性调整抽屉组件窗体的大小
         close-on-click-modal属性设置是否可以通过点击 modal 关闭 Drawer
         showDrawer属性控制窗体显示与否
     -->
    <el-drawer v-model="showDrawer" :title="title" :size="size" :close-on-click-modal="false"
        :destroy-on-close="destroyOnClose">
        <div class="formDrawer">
            <div class="body">
                <!-- <slot>插槽，父组件中自定义模版内容会渲染到插槽位置 -->
                <slot></slot>
            </div>
            <div class="actions">
                <el-button :loading="loading" type="primary" @click="submit">{{ confirmText }}</el-button>
                <el-button type="primary" @click="close">取消</el-button>
            </div>
        </div>
    </el-drawer>
</template>

<style>
.formDrawer {
    /* flex布局 伸缩项目主轴方向设置为垂直 */
    @apply flex flex-col;
    width: 100%;
    height: 100%;
    position: relative;
}

.formDrawer .body {
    /* 伸缩项目尽量铺满整个父容器 */
    flex: 1;
    /* 父相子绝（相对于父元素设置子元素位置） */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 50px;
    /* 内容超出元素部分,自动显示滚动条 */
    overflow-y: auto;
}

.formDrawer .actions {
    /* flex布局 伸缩项目外边距距离顶部的高度为自动 伸缩项目侧轴垂直居中 */
    @apply flex mt-auto items-center;
    height: 50px;
}
</style>
